<!-- 我的-我的办件-事项评价 -->
<template>
  <div class="container">
      <div class="star">
        <div class="star-item">
          <div class="label">总体评价</div>
          <u-rate v-model="totalEstimate" active-color="#ffde00" inactive-color="#b2b2b2" gutter="20" size="40"></u-rate>
          <div class="star-desc">{{starDescArr[totalEstimate-1]}}</div>
        </div>
      </div>
      <u-form :model="form" ref="uForm" label-width="70px">
        <div>
          <u-form-item label="评价意见" :label-style="{color: '#0c3b96'}" label-position="top">
            <u-input v-model="form.appraiseContent" type="textarea" border auto-height height="150" :maxlength="1000" placeholder="请输入" />
          </u-form-item>
        </div>
        </u-form>
      <u-button class="btn" type="primary" ripple shape="circle" @click="submit">提交</u-button>
  </div>
</template>
<script>
import { addOrderAppraiseAPI } from "../../api/mine";

const starDescArr = [
  "非常不满意",
  "基本不满意",
  "基本满意",
  "满意",
  "非常满意",
];

export default {
  data() {
    return {
      starDescArr,
      totalEstimate: 5,
      form: {
        orderId: '',
        appraiseContent: "",
      },
      rules: {
      },
    };
  },
  computed: {

  },
  onShareAppMessage() {},
  onLoad(options) {
    let { orderId, totalEstimate, appraiseContent } = options
    if (totalEstimate) {
      this.totalEstimate = totalEstimate;
    }
    if (appraiseContent) {
      this.form.appraiseContent = appraiseContent;
    }
    this.form.orderId = orderId
  },
  methods: {
    submit() {
      console.log(123)
      addOrderAppraiseAPI({
        ...this.form,
        totalEstimate: this.totalEstimate,
      }).then((res) => {
        wx.showToast({
            title: "提交成功",
            icon: "success",
        });
        setTimeout(() => {
            this.$u.route({ type: "back" });
        }, 1500);
      });
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
      this.$refs.uForm.setRules(this.rules);
  },
};
</script>
<style scoped lang="scss">
.container {
  position: relative;
  padding: 5px 20px;
  min-height: 100vh;
  box-sizing: border-box;
  .item {
      border-bottom: 1px solid #efefef;
  }
  .btn {
      position: absolute;
      left: 30px;
      right: 30px;
      bottom: 50px;
  }
  .star {
      margin-top: 10px;
      .star-item {
          display: flex;
          align-items: center;
          margin: 15px 0;
          .label {
              font-size: 15px;
              color: #0c3b96;
              margin-right: 5px;
          }
          .star-desc {
              margin-left: 10px;
              font-size: 14px;
          }
      }
  }
}
</style>
